{% extends "base.html" %}

{% block head %}
{{ super() }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="分享 GitHub 入门级、有趣的开源项目。推广自己的开源项目、编程实践项目、适合练手的开源项目、HelloGitHub月刊">
<link rel="stylesheet" href="{{ url_for('static', filename='css/side-menu.css')}}">
{% endblock %}

{% block body %}
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <div id="menu">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="/">Hello GitHub</a>

            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="/" class="pure-menu-link">首页</a></li>
                <li class="pure-menu-item"><a href="{{ menu_url }}" class="pure-menu-link">内容</a></li>
                <li class="pure-menu-item"><a href="/tiobe/?url={{ menu_url }}" class="pure-menu-link">TIOBE 排行榜</a></li>
                <li class="menu-item-divided pure-menu-selected">
                    <a href="/about/?url={{ menu_url }}" class="pure-menu-link">关于</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="header">
            <h1>{{ page_title }}</h1>
            <h2>兴趣是最好的老师，HelloGitHub 就是帮你找到编程的兴趣。</h2>
        </div>

        <div class="content">
            <h2 class="content-subhead">关于本网站</h2>
            <ul>
                <li>会编程的小伙伴都肯定写过：<code>hello world!</code>，这段代码是入门必写片段。</li>
                <li>GitHub 是享誉全球最大的程序员同性交友网站，汇集的大量的开源项目、丰富的编程资源、有意思的项目。</li>
            </ul>
            <p>
                这就是 HelloGitHub 网站名的由来。随着<a target="_blank" href="https://github.com/521xueweihan/HelloGitHub">《HelloGitHub 月刊》</a>推荐的项目越来越多，单纯通过文本和人脑无法流畅的管理这些信息，所以我就创建了这个网站。
                编程是一门实践性技能，只有不断的动手编写代码才能提高编程能力，希望你可以在 HelloGitHub 这个网站推荐的各种开源项目中发现自己感兴趣的项目，动手加入、发起自己的开源项目。
            </p>

            <h2 class="content-subhead">关于开源</h2>
            <p>
                项目源代码已开源在 GitHub 上，<a target="_blank" href="https://github.com/521xueweihan/hellogithub.com">地址</a><br>
                现在网站的功能简单、样式丑陋、代码不优雅、交互垃圾、内容太少，如果你也是这样认为，那还等什么赶紧贡献代码，我等你！
            </p>

            <div class="pure-g">
                <div class="pure-u-1-4">
                    <img class="pure-img-responsive" src="https://raw.githubusercontent.com/521xueweihan/HelloGitHub/master/content/01/img/i-want-you.jpg" alt="I-want-you">
                </div>
                <div class="pure-u-1-4">
                    <img class="pure-img-responsive" src="https://raw.githubusercontent.com/521xueweihan/HelloGitHub/master/content/01/img/i-want-you.jpg" alt="I-want-you">
                </div>
                <div class="pure-u-1-4">
                    <img class="pure-img-responsive" src="https://raw.githubusercontent.com/521xueweihan/HelloGitHub/master/content/01/img/i-want-you.jpg" alt="I-want-you">
                </div>
                <div class="pure-u-1-4">
                    <img class="pure-img-responsive" src="https://raw.githubusercontent.com/521xueweihan/HelloGitHub/master/content/01/img/i-want-you.jpg" alt="I-want-you">
                </div>
            </div>

            <h2 class="content-subhead">关于技术栈</h2>
            <p>
                我是个 Pythoneer，所以本站骄傲的采用 Python 语言开发。
            </p>
            <p><code>后端</code></p>
            <ul>
                <li>Flask</li>
                <li>Peewee</li>
                <li>requests</li>
                <li>huey</li>
            </ul>
            <p><code>前端</code></p>
            <ul>
                <li>Purecss</li>
                <li>font-awesome</li>
                <li>jQuery</li>
                <li>share.js</li>
                <li>highlight.js</li>
            </ul>

        </div>
    </div>

</div>
{% endblock %}